import React, { Component } from 'react'
import Router from "./router/index";
import { BrowserRouter} from 'react-router-dom';
// import Header from "./component/header";
import Nav from "./component/Nav";
// import Serch from "./component/search";
import { Icon } from 'antd-mobile';
import { Drawer } from 'antd-mobile';
 class App extends Component {
  state = {
    open: true,
    // opens: true,
  }
  render() {
    // const sidebar=<div className="search">
    //       <div className="search-header">
    //                <div className="back" onClick={()=>{this.backs()}}><i className="fa fa-arrow-left" aria-hidden="true"></i></div>
    //                <h1>歌单</h1>
    //           </div>
    //       </div>
    return (
        <BrowserRouter>
                {/* <Header></Header> */}
                
               
                {/* <Serch></Serch> */}
                  <div className="app">
                  <div className="header">
                    <div className="left">☰</div>
                    <div className="comment">云音悦</div>
                    <div className="right" onClick={()=>{this.onOpenChange()}}><Icon type="search"/></div>
                </div>
                  <Nav></Nav>
                <div className="main">
                  <Router></Router>
                </div>
                  </div>

                    <div className={this.state.open?"serch":"aaa"} >
                    <div className="serch-header">
                   <div className="back" onClick={()=>{this.backs()}}><i className="fa fa-arrow-left" aria-hidden="true"></i></div>
                   <h1>搜索</h1>
              </div>
                    </div>
                  
    </BrowserRouter>
    )
  }
  onOpenChange(){
    this.setState({ open: !this.state.open });
    console.log(this.state.open);
  }
  backs(){
    this.setState({ open: !this.state.open });
  }
}

export default App;